<template>
	<view class="login-bg">
		<view>
			<view class="padding-lr-xl" style="padding-top: 100px">
				<view class="banner align-center justify-center">
					<image class="logo-image" mode="aspectFit"
						src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/b35c0b08-66f4-4f45-a0d4-ec99857569ad.png">
					</image>
					<text>環球通醫藥</text>
				</view>
				<view class="flex justify-center align-center margin-top">
					<view class="flex padding-left-xs">
						<view class="text-xl text-white text-bold">{{ $t('login.login.18u6pb') }}</view>
					</view>
				</view>
			</view>
			<view class="main margin-top-xl padding-top-sm">
				<!-- 				<div class="form-input">
					<input v-model="loginForm.username" type="text" maxlength="20"
						:placeholder="isPhoneLogin ? $t('login.forget.por731') : $t('login.login.144vvq')"></input>
				</div>

				<div class="form-input" v-show="isPhoneLogin">
					<input v-model="loginForm.code" :isShowCode="true" type="text" maxlength="20" ref="smsCodeRef"
						@setCode="showGraphCodeModal" :placeholder="$t('login.login.176n4v')"></input>
				</div>

				<div class="form-input" v-show="!isPhoneLogin">
					<input v-model="loginForm.password" type="password" maxlength="20"
						:placeholder="$t('login.login.7muxgj')"></input>
				</div> -->

				<wInput class="login-icon" v-model="loginForm.username" type="text" maxlength="20"
					:placeholder="isPhoneLogin ? $t('login.forget.por731') : $t('login.login.144vvq')"></wInput>
				<wInput class=" login-icon" v-model="loginForm.code" v-show="isPhoneLogin" :isShowCode="true"
					type="text" maxlength="20" ref="smsCodeRef" @setCode="showGraphCodeModal"
					:placeholder="$t('login.login.176n4v')"></wInput>
				<wInput class="login-icon" v-show="!isPhoneLogin" v-model="loginForm.password" type="password"
					maxlength="20" :placeholder="$t('login.login.7muxgj')"></wInput>
				<wInput style="border-radius: 40rpx;" class=" login-icon" v-model="loginForm.code"
					v-show="!isPhoneLogin" :isShowRandom="true" :codeImgSrc="code.src" type="text" :maxlength="code.len"
					@refreshCode="refreshCode" :placeholder="$t('login.login.9c1kh2')"></wInput>
			</view>

			<view class="flex justify-between margin-top-lg" style="padding-left: 8%; padding-right: 8%">
				<view>
					<!-- #ifdef MP-WEIXIN-->
					<!-- <view class="text-blue text-sm" @click="showModal = 'show'">{{ $t('login.login.a366d6') }}</view> -->
					<!-- #endif -->
					<view>
						<view class="text-sm text-gray">
							<!-- <lang-change /> -->
						</view>
					</view>
				</view>
				<view>
					<view class="text-blue text-sm" @click="changeLoginType">
						{{ isPhoneLogin ? $t('login.login.m97414') : $t('login.login.e2m986') }}
					</view>
				</view>
			</view>
			<view class="flex justify-center" style="margin-top: 30px">
				<button class="bg-gradual-purple margin-tb-sm lg login" @click="startLogin">
					{{ $t('login.login.vz2dg7') }}
				</button>
			</view>
		</view>
		<!-- 用户隐私政策授权弹框 -->
		<privacy-policy-popup v-if="showPrivacyPolicy"></privacy-policy-popup>
		<!-- 授权弹框 -->
		<view class="cu-modal bottom-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-gray" @tap="showModal = ''">{{ $t('login.login.5csq28') }}</view>
				</view>
				<view class="padding-xl text-lg">{{ modalContent }}</view>
				<button class="cu-btn bg-orange margin-tb-sm lg margin-top-sm"
					style="margin-right: 10%; margin-left: 10%; width: 80%; height: 40px; margin-bottom: 20px"
					open-type="getUserInfo" @getuserinfo="wxLogin()">
					{{ $t('login.login.77w162') }}
				</button>
			</view>
		</view>
		<view class="margin-top text-white flex justify-center text-sm" v-show="showPrivacyPolicy">
			<view class="yuan text-white" @click="isagree">
				<!-- <view class="ziyuan"></view> -->
				<image v-if="is_agree" class="ziyuan"
					src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/9890bac0-7a7d-40e1-b765-d16df021a7b5.png" />
			</view>
			<text class="text-white">{{ $t('login.login.dl6j37') }}</text>
			<navigator class="text-white text-sm text-under-line" url="/pages/public/agreement/index?type=3">
				{{ $t('login.login.uh6spk') }}
			</navigator>
			{{ $t('login.login.71l885') }}
			<navigator class="text-white text-sm text-under-line" url="/pages/public/agreement/index?type=4">
				{{ $t('login.login.4e43cd') }}
			</navigator>
		</view>
		<!-- 发送短信之前的图形验证码 -->
		<graph-code ref="graphCodeRef" :phone="loginForm.username" @onSend="sendSms"></graph-code>
	</view>
</template>

<script>
	import i18nVue from '@/locale';
	const i18n = i18nVue.global;
	import __config from '@/config/env';

	var _this;
	import wInput from '@/components/watch-login/watch-input.vue'; //input
	import wButton from '@/components/watch-login/watch-button.vue'; //button
	import privacyPolicyPopup from '@/components/basic-components/privacy-policy/privacy-policy-popup.vue';
	import GraphCode from '@/components/graph-code/graph-code.vue'; // 图形验证码

	import api from '@/api/api';
	import {
		randomLenNum,
		encryption
	} from '@/utils/util';
	import service from '@/store/service.js';
	import LangChange from '@/components/lang-change/index.vue';

	export default {
		data() {
			return {
				showPrivacyPolicy: __config.showPrivacyPolicy,
				code: {
					src: '/code',
					value: '',
					len: 4,
					type: 'image'
				},
				loginForm: {
					username: '',
					phone: '',
					code: '',
					password: '',
					randomStr: ''
				},
				openId: '',
				isPhoneLogin: false,
				showModalLogin: false, //弹框
				showModal: false, //弹框
				showPrivacyPolicies: false, //弹框
				modalContent: i18n.t('login.login.yw45ca'),
				is_agree: false // 是否同意
			};
		},
		components: {
			wInput,
			wButton,
			privacyPolicyPopup,
			GraphCode,
			LangChange
		},
		mounted() {
			_this = this;
			//this.isLogin();
		},
		created() {
			this.refreshCode();
		},
		onLoad() {},
		methods: {
			isagree() {
				this.is_agree = true
			},
			// 显示图形验证码弹框
			showGraphCodeModal() {
				if (this.loginForm.username == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: this.$t('login.forget.por731')
					});
					return;
				}
				//验证手机号码
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.loginForm.username)) {
					uni.showToast({
						title: this.$t('login.login.47h8p7'),
						icon: 'none'
					});
					return;
				}
				this.$refs.graphCodeRef.showModal();
			},
			wxLogin() {
				var that = this;
				this.showModal = '';
				uni.login({
					provider: 'weixin',
					success: (res) => {
						//是否获取openId
						// let wxLoginUrl = api.account + "/users/wxCodeLogin/" + res.code;
						// httpRequest.httpGetLogin(wxLoginUrl, function(res){
						// 	that.openId = res.openId;
						// 	if(res.flag){ // 判断是否有该用户信息
						// 		that.accessTokenLogin(res.tokenData.access_token);
						// 	} else {
						// 		that.showModalLogin = true;
						// 	}
						// });
					},
					fail: (e) => {
						console.log('fail', e);
					}
				});
			},
			getPhoneNumber(e) {},
			startLogin() {
				if (!this.is_agree) {
					uni.showToast({
						icon: 'none',
						title: '请同意协议!'
					})
					return
				}

				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.loginForm.username.length == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: this.isPhoneLogin ? this.$t('login.forget.por731') : this.$t('login.login.3o05hc')
					});
					return;
				}
				if (this.isPhoneLogin) {
					if (this.loginForm.code.length == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: this.$t('login.login.176n4v')
						});
						return;
					}
				} else {
					if (this.loginForm.password.length == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: this.$t('login.login.6v78aw')
						});
						return;
					}
					if (this.loginForm.code.length == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: this.$t('login.login.9c1kh2')
						});
						return;
					}
				}

				if (this.isPhoneLogin) {
					// 手机验证码登录
					api.login
						.loginByPhone(this.loginForm.username, this.loginForm.code)
						.then((response) => {
							if (response) {
								service.saveAccessToken(response, getApp().globalData);
								this.getUserInfo();
							}
						})
						.catch((response) => {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: this.$t('login.login.99862q')
							});
							this.refreshCode();
						});
				} else {
					// 账号密码登录
					const loginInfo = encryption({
						data: this.loginForm,
						key: __config.securityKey,
						param: ['password']
					});
					api.login
						.loginByUsername(loginInfo)
						.then((response) => {
							// 登录成功 保存登录数据、本次登录的token
							service.saveAccessToken(response, getApp().globalData);
							// 获取个人信息
							this.getUserInfo();
						})
						.catch((response) => {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: response.msg
							});
							this.refreshCode();
						});
				}
			},
			refreshCode() {
				this.loginForm.code = '';
				this.loginForm.randomStr = randomLenNum(this.code.len, true);
				this.code.type === 'text' ? (this.code.value = randomLenNum(this.code.len)) : (this.code.src = api.login
					.randomStr + this.loginForm.randomStr);
			},
			sendSms(graphCode) {
				if (this.loginForm.username == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: this.$t('login.forget.por731')
					});
					return;
				}
				//验证手机号码
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.loginForm.username)) {
					uni.showToast({
						title: this.$t('login.login.47h8p7'),
						icon: 'none'
					});
					return;
				}
				// 发送验证码
				this.handleSend(graphCode);
			},
			handleSend(graphCode) {
				//发送验证码
				api.login
					.sendCode({
						phone: this.loginForm.username,
						type: 1,
						graphCode
					})
					.then((response) => {
						if (response.code == '0') {
							uni.showToast({
								title: this.$t('login.login.gt0qj1')
							});
							// 启动倒计时
							this.$refs.smsCodeRef.runCode(60);
							this.$refs.graphCodeRef.hideModal();
						} else {
							this.$refs.graphCodeRef.refreshGraphCode();
							uni.showToast({
								title: response.msg,
								icon: 'none'
							});
						}
					})
					.catch((response) => {
						this.$refs.graphCodeRef.refreshGraphCode();
					});
			},
			accessTokenLogin(access_token) {},
			getUserInfo() {
				api.getUserInfo()
					.then(async (response) => {
						// 保存用户信息
						service.saveUserInfo(response.data.sysUser);
						// 保存用户权限
						service.saveUserPermissions(response.data.permissions, getApp().globalData);
						//初始化IM
						getApp().initJIM();
						uni.reLaunch({
							url: '/pages/home/index'
						});
					})
					.catch((response) => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: response.msg
						});
					});
			},
			changeLoginType() {
				this.loginForm.code = '';
				this.isPhoneLogin = !this.isPhoneLogin;
			}
		}
	};
</script>

<style>
	.yuan {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		background-color: #011B3F;
		border: 1px solid #fff;
		float: left;
		margin-right: 20rpx;
	}

	.ziyuan {
		width: 80%;
		height: 80%;
		border-radius: 50%;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 auto;
		display: block;

	}

	.cu-btn {
		background-image: none;
		background-color: rgb(0, 118, 145) !important;

	}

	.margin-top-xl {
		margin-top: 6upx;
	}

	page {
		background-color: #ffffff;
	}

	.login-bg {
		background-color: #011B3F;
		width: 100%;
		height: 100vh;
		/* background-image: url(https://minio.joolun.com/joolun/1/material/9c91c0f4-2b5d-4995-8015-f8283e1bfbc4.png); */
		/* background-size: 100% 50%; */
		/* background-repeat: no-repeat; */
	}

	.logo {
		margin-top: 80rpx;
	}

	.logo-image {
		width: 150px;
		height: 150px;
	}

	.login {
		width: 690rpx;
		height: 48px !important;
		background-color: #316FC2;
		border-radius: 40rpx;
	}

	.login-icon {
		color: #888;
		font-size: 18px;
	}
</style>


<style scoped lang="scss">
	.banner {
		display: flex;
		flex-direction: column;

		image {
			height: 260rpx;
			width: 260rpx;
		}

		text {
			color: #fff;
			font-size: 40rpx;
			letter-spacing: 0.4rem;
			margin: 0 auto;
		}
	}

	.text-under-line {
		margin-left: 8rpx;
		margin-right: 8rpx;
		text-decoration: underline;
	}

	.form-input {
		height: 88rpx;
		border-radius: 40rpx;
		background-color: #4E6079;
		color: #fff;
		border: 1px solid #A2A8B0;
		width: 690rpx;
		margin-left: 30rpx;

		input {
			height: 100%;
			width: 90%;
			margin-left: 5%;
		}
	}
</style>